import SearchSharp from '@@/icons/search'
import { NInput, NIcon, NSpace, NButton } from 'naive-ui'
import { copyValue } from '@/util'
import api from '@/request/admin'
import { ref } from 'vue'
const createTableColumns = (data) => {
	const name = ref('')
	const reflush = async () => {
		data.tableData.value = await api.getTableData(data.params)
	}
	const slots = {
		suffix: () => <NIcon style="cursor: pointer" size="16" component={SearchSharp} onClick={() => search(name.value)}></NIcon>
	}
	const search = (val) => {
		data.params.pageNo = 1
		data.params.name = val
		reflush()
	}
	const update = id => {
		data.showEditProps.id = id
		data.showEditProps.title = '修改教师'
		data.showEditProps.show = true
	}
	const del = id => {
		api.remove(id, content => {
			reflush()
		})
	}
	return [
		{
			title: '姓名',
			key: 'name'
		},
		{
			title: '手机号',
			key: 'phone',
			ellipsis: true
		},
		{
			title: '电子信箱',
			key: 'email',
			ellipsis: true
		},
		{
			title: '性别',
			render: (rowData) => rowData.gender === 1 ? '男' : '女'
		},
		{
			title: () => (<div class="table-title">
				<NInput 
					value={name.value}
					placeholder="请输入要搜索的管理员姓名"
					on-update:value={e => { name.value = e }}
					on-keydown={e => { if (e.keyCode === 13) {
						search(name.value)
					} }}
					v-slots={slots}>
				</NInput>
			</div>),
			width: 235,
			render: (rowData) => {
				if (rowData.active) {
					return (<NSpace size="medium">
						<NButton type="primary" size="small" onClick={() => update(rowData.id)}>修改</NButton>
						<NButton type="error" size="small" onClick={() => del(rowData.id)}>删除</NButton>
					</NSpace>)
				} else {
					return <span></span>
				}
			}
		}
	]
}
const add = (data) => {
	data.showEditProps.id = null
	data.showEditProps.title = '添加管理员'
	data.showEditProps.show = true
}
const upDateTable = async (params, tableData) => {
	tableData.value = await api.getTableData(params)
}
const createFormData = async id => { 
	const formData = {
		name: '',
		phone: '',
		email: '',
		gender: null
	}
	if (id) {
		formData.id = id
		const content = await api.getById(id)
		copyValue(formData, content)
	} 
	return formData
}
const createRules = (id) => {
	return {
		name: [
			{ required: true, message: '请输入姓名', trigger: 'blur' },
			{ max: 20, message: '姓名最多20个字符', trigger: 'blur' }
		],
		phone: [
			{ required: true, message: '请输入手机号', trigger: 'blur' },
			{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
			{ validator:(field, value, callback) => api.check('phone', value, callback, id), message: '该手机号已经使用', trigger: 'blur'}
		],
		email: [
			{ required: true, message: '请输入电子信箱', trigger: 'blur' },
			{ type: 'email', message: '请输入正确的电子信箱', trigger: 'blur' },
			{ validator: (field, value, callback) => api.check('email', value, callback, id), message: '该电子信箱已经使用', trigger: 'blur' }
		],
		gender: [
			{ required: true, message: '请选择性别', trigger: 'blur' }
		]
	}
}
export const createRoleOptions = () => {
	const options = []
	Object.entries(role).forEach(([key, value]) => {
		options.push({
			label: value,
			value: key
		})
	})
	return options
}
export default {
	add,
	getTableData: api.getTableData,
	createTableColumns,
	upDateTable,
	createFormData,
	createRules,
	createRoleOptions,
	addOrUpdate: api.addOrUpdate
	
}